// 导入所需组件和 hooks
import { Image, List, InfiniteScroll } from "antd-mobile";
import { useEffect, useState } from "react";
import { fetchListAPI } from "@/apis/list";
import type { ListRes } from "@/apis/list";
import { useNavigate } from "react-router-dom";

// 定义组件 props 类型
type Props = {
  channelId: string; // 频道 ID，用于获取对应频道的文章列表
};

// HomeList 组件：展示首页文章列表，支持下拉刷新和上拉加载更多
const HomeList = (props: Props) => {
  // 解构获取频道 ID
  const { channelId } = props;

  // 存储文章列表数据的状态
  const [listRes, setListRes] = useState<ListRes>({
    results: [], // 文章列表
    pre_timestamp: "" + new Date().getTime(), // 时间戳，用于分页加载
  });

  // 组件挂载时获取初始文章列表
  useEffect(() => {
    const getList = async () => {
      try {
        // 调用 API 获取文章列表
        const res = await fetchListAPI({
          channel_id: channelId,
          timestamp: "" + new Date().getTime(), // 当前时间戳作为初始时间
        });
        // 更新文章列表状态
        setListRes({
          results: res.data.data.results,
          pre_timestamp: res.data.data.pre_timestamp,
        });
      } catch (error) {
        throw new Error("fetch list error");
      }
    };
    getList();
  }, [channelId]); // 依赖 channelId，当频道变化时重新获取数据

  // 控制是否还有更多数据的状态
  const [hasMore, setHasMore] = useState(true);

  // 加载下一页文章的函数
  const loadMore = async () => {
    // 上拉加载触发日志
    console.log("上拉加载触发了");
    try {
      // 调用 API 获取下一页数据
      const res = await fetchListAPI({
        channel_id: channelId,
        timestamp: listRes.pre_timestamp, // 使用上次返回的时间戳作为参数
      });

      // 合并新数据到现有列表中
      setListRes({
        results: [...listRes.results, ...res.data.data.results],
        pre_timestamp: res.data.data.pre_timestamp,
      });

      // 如果返回结果为空，说明没有更多数据了
      if (res.data.data.results.length === 0) {
        setHasMore(false);
      }
    } catch (error) {
      throw new Error("fetch list error");
    }
  };

  // 路由导航 hook
  const navigate = useNavigate();

  // 跳转到文章详情页的函数
  const goToDetail = (id: string) => {
    navigate(`/detail?id=${id}`); // 携带文章 ID 跳转到详情页
  };

  // 渲染文章列表和无限滚动组件
  return (
    <>
      {/* 文章列表展示 */}
      <List>
        {listRes.results.map((item) => (
          <List.Item
            onClick={() => goToDetail(item.art_id)} // 点击跳转详情页
            key={item.art_id} // 唯一 key 值
            prefix={
              // 文章封面图片
              <Image
                src={item.cover.images?.[0]}
                style={{ borderRadius: 20 }}
                fit="cover"
                width={40}
                height={40}
              />
            }
            description={item.pubdate} // 发布时间
          >
            {item.title} // 文章标题
          </List.Item>
        ))}
      </List>

      {/* 无限滚动组件，用于上拉加载更多 */}
      <InfiniteScroll
        loadMore={loadMore} // 加载更多函数
        hasMore={hasMore} // 是否还有更多数据
        threshold={10} // 触发加载的距离阈值
      />
    </>
  );
};

export default HomeList;
